<template>
  <div class="msg-chart">
    <div class="time">
      <div class="back" @click="back">返回上一页</div>
      <div @click="toTime(1)" :class="{ item: true, item_: checkTime == 1 }">
        最近20天
      </div>
      <!-- <div class="line"></div> -->
      <div @click="toTime(2)" :class="{ item: true, item_: checkTime == 2 }">
        最近20周
      </div>
      <!-- <div class="line"></div> -->
      <div @click="toTime(3)" :class="{ item: true, item_: checkTime == 3 }">
        最近12个月
      </div>
    </div>
    <div class="change-chart">
      <div :class="{ item: true, item_: chart == 'bar' }" @click="toChange(1)">
        切换柱状图
      </div>
      <div :class="{ item: true, item_: chart == 'line' }" @click="toChange(2)">
        切换折线图
      </div>
    </div>
    <div id="charts"></div>
  </div>
</template>
<script>
export default {
  name: "chart",
  data() {
    return {
      chart: "bar", //切换图形
      show: 1,
      checkTime: 1, //时间参数
      url: "",
      interval: 2, //横轴间隔数量
      yName: "数量", //纵轴名称
      colorList: [], //图表颜色数组
      name: [], //指标数组
      xAxisData: [], // x轴数据，可根据需求
      ySeries: [], //y轴数据
    };
  },
  created() {
    if (this.$route.query) {
      this.show = this.$route.query.index;
    } else {
      this.show = 1;
    }
    if (localStorage.getItem("token")) {
      this.token = localStorage.getItem("token");
    } else {
      this.$router.push({ path: "/login" });
      return false;
    }
    this.getTitle(+this.show);
  },
  mounted() {
    this.getDate();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    toChange(index) {
      if (index == 1 && this.chart == "bar") {
        return;
      }
      if (index == 2 && this.chart == "line") {
        return;
      }
      if (index == 1 && this.chart == "line") {
        this.chart = "bar";
      }
      if (index == 2 && this.chart == "bar") {
        this.chart = "line";
      }
      this.getDate();
    },
    getSeries(index, res) {
      switch (index) {
        case 1:
          this.ySeries = [
            {
              name: "新增会员数",
              type: this.chart,
              smooth: true,
              data: res.data.add_store_sum,
              // itemStyle: {
              //   //上方显示数值
              //   normal: {
              //     label: {
              //       show: true, //开启显示
              //       position: "top", //在上方显示
              //       textStyle: {
              //         //数值样式
              //         color: "black",
              //         fontSize: 12,
              //       },
              //     },
              //   },
              // },
            },
            // {
            //   name: "体验版",
            //   type: this.chart,
            //   smooth: true,
            //   data: res.data.add_try_store_sum,
            // },
            // {
            //   name: "外部推广",
            //   type: this.chart,
            //   smooth: true,
            //   data: res.data.outer_add_store_sum,
            // },
            // {
            //   name: "用户裂变",
            //   type: this.chart,
            //   smooth: true,
            //   data: res.data.user_add_store_sum,
            // },
            // {
            //   name: "内部推广",
            //   type: this.chart,
            //   smooth: true,
            //   data: res.data.dbo_add_store_sum,
            // },
            {
              name: "新增用户",
              type: this.chart,
              smooth: true,
              data: res.data.add_user_sum,
            },
          ];

          break;
        case 2:
          this.ySeries = [
            {
              name: "支付订单数",
              type: this.chart,
              smooth: true,
              data: res.data.pay_order_sum,
            },
            {
              name: "支付用户数",
              type: this.chart,
              smooth: true,
              data: res.data.pay_user_sum,
            },
          ];
          break;
        case 3:
          this.ySeries = [
            {
              name: "客单价",
              type: this.chart,
              smooth: true,
              data: res.data.user_per_price,
            },
          ];
          break;
        case 4:
          this.ySeries = [
            {
              name: "毛利",
              type: this.chart,
              smooth: true,
              data: res.data.margin,
            },
            {
              name: "佣金",
              type: this.chart,
              smooth: true,
              data: res.data.commision,
            },
          ];
          break;
        case 5:
          this.ySeries = [
            {
              name: "新增平台商品",
              type: this.chart,
              smooth: true,
              data: res.data.yff_goods_sum,
            },
            {
              name: "新增礼包",
              type: this.chart,
              smooth: true,
              data: res.data.gift_goods_sum,
            },
            {
              name: "下架平台商品",
              type: this.chart,
              smooth: true,
              data: res.data.yff_goods_no_sum,
            },
            {
              name: "下架礼包",
              type: this.chart,
              smooth: true,
              data: res.data.gift_goods_no_sum,
            },
          ];
          break;
        case 6:
          this.ySeries = [
            {
              name: "总流水",
              min: 0,
              type: this.chart,
              smooth: true,
              data: res.data.store_amount,
            },
            // {
            //   name: "自购流水",
            //   min: 0,
            //   type: this.chart,
            //   smooth: true,
            //   data: res.data.self_store_amount,
            // },
            // {
            //   name: "分销流水",
            //   min: 0,
            //   type: this.chart,
            //   smooth: true,
            //   data: res.data.other_store_amount,
            // },
            // {
            //   name: "平台流水",
            //   min: 0,
            //   type: this.chart,
            //   smooth: true,
            //   data: res.data.yff_store_amount,
            // },
          ];
          break;
        case 7:
          this.ySeries = [
            {
              name: "自购艺店数",
              type: this.chart,
              smooth: true,
              data: res.data.self_buy_store_sum,
            },
            {
              name: "自购订单数",
              type: this.chart,
              smooth: true,
              data: res.data.self_buy_suborder_sum,
            },
          ];
          break;
        case 8:
          this.ySeries = [
            {
              name: "首单支付用户",
              type: this.chart,
              smooth: true,
              data: res.data.first_order_sum,
            },
          ];
          break;
        case 9:
          this.ySeries = [
            {
              name: "首单客单价",
              type: this.chart,
              smooth: true,
              data: res.data.first_order_amount,
            },
          ];
          break;
        default:
      }
    },
    getTitle(index) {
      switch (index) {
        case 1:
          document.title = "艺店";
          this.url = "storeChart";
          this.yName = "数量";
          this.name = [
            "新增会员数",

            "新增用户",
          ];
          this.colorList = [
            "#CD5C5C",
            "#ff6600",
            "#808bc6",
            "#228B22",
            "#FF69B4",
            "#00CED1",
          ];
          break;
        case 2:
          document.title = "订单";
          this.url = "orderChart";
          this.yName = "数量";
          this.name = ["支付订单数", "支付用户数"];
          this.colorList = ["#2db7f5", "#ff6600"];
          break;
        case 3:
          document.title = "客单价";
          this.url = "userPerChart";
          this.yName = "客单价";
          this.name = ["客单价"];
          this.colorList = ["#2db7f5"];
          break;
        case 4:
          document.title = "营收";
          this.url = "amountChart";
          this.yName = "金额数";
          this.name = ["毛利", "佣金"];
          this.colorList = ["#2db7f5", "#ff6600"];
          break;
        case 5:
          document.title = "商品";
          this.url = "goodsChart";
          this.yName = "商品数";
          this.name = [
            "新增平台商品",
            "新增礼包",
            "",
            "下架平台商品",
            "下架礼包",
          ];
          this.colorList = ["#2db7f5", "#ff6600", "#808bc6", "#228B22"];

        case 6:
          document.title = "流水";
          this.url = "payChart";
          this.yName = "金额数";
          this.name = ["总流水"];
          this.colorList = ["#2db7f5"];
          // this.name = ["总流水", "自购流水", "", "分销流水", "平台流水"];
          // this.colorList = ["#2db7f5", "#ff6600", "#808bc6", "#228B22"];
          break;
        case 7:
          document.title = "自购";
          this.url = "selfBugChart";
          this.yName = "数量";
          this.name = ["自购艺店数", "自购订单数"];
          this.colorList = ["#2db7f5", "#ff6600"];
          break;
        case 8:
          document.title = "首单支付用户";
          this.url = "firstOrderNumChart";
          this.yName = "数量";
          this.name = ["首单支付用户"];
          this.colorList = ["#2db7f5"];
          break;
        case 9:
          document.title = "首单客单价";
          this.url = "firstOrderAmountChart";
          this.yName = "客单价";
          this.name = ["首单客单价"];
          this.colorList = ["#2db7f5"];
          break;
        default:
      }
    },
    //
    toTime(index) {
      if (this.checkTime == index) {
        this.checkTime = index;
        return;
      }
      this.checkTime = index;
      if (this.checkTime == 1) {
        this.interval = 2;
      }
      if (this.checkTime == 2) {
        this.interval = 2;
      }
      if (this.checkTime == 3) {
        this.interval = 1;
      }
      this.getDate();
    },
    //获取报表数据
    getDate() {
      let that = this;
      Indicator.open();
      that.$axios
        .get("/mall/v1/statistics/" + that.url, {
          params: {
            date: that.checkTime,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + localStorage.getItem("token"),
          },
        })
        .then(
          (res) => {
            if (res.data.code == 200) {
              Indicator.close();
              var res = res.data;
              that.xAxisData = res.data.date_array;
              that.getSeries(+this.show, res);

              that.loadLine();
            } else if (res.data.code == 10000) {
              that.$router.push({ path: "/login" });
            } else {
              Toast(res.data.msg);
            }
          },
          (res) => {
            console.log("error");
          }
        );
    },
    loadLine() {
      var that = this;
      this.echarts = this.$echarts.init(document.getElementById("charts"));
      let option = {
        // title: {
        //   text: "折线图堆叠",
        // },
        tooltip: {
          trigger: "axis",
        },
        color: that.colorList,
        legend: {
          data: that.name,
          orient: "vertical",
          // icon: "rect",
          top: 0,
          right: 0,
          itemGap: 20,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 12,
            // padding: [0, 0, 0, 5],
            // color: "rgba(255,255,255,0.87)",
            fontWeight: "bold",
          },
        },
        grid: {
          left: "3%",
          right: "11%",
          // top: "-15%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "时间",
          boundaryGap: false,
          data: that.xAxisData, // x轴数据
          axisLabel: {
            interval: that.interval, //0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）
            rotate: 20, //倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
          },
        },
        yAxis: {
          type: "value",
          name: that.yName,
          nameTextStyle: {
            fontSize: 12,
            // padding: [0, 0, 0, 5],
            // color: "rgba(255,255,255,0.87)",
            fontWeight: "bold",
          },
          axisLabel: {
            show: true,
            // textStyle: {
            //   color: "#fff",
            // },
            // 这里重新定义就可以
            formatter: function (value) {
              var valueTxt = "";
              if (value >= 0) {
                if (value > 999 && value < 10000) {
                  valueTxt = value / 1000 + "k";
                } else if (value >= 10000) {
                  valueTxt = value / 10000 + "w";
                } else {
                  valueTxt = value;
                }
              } else {
                var num = Math.abs(value);
                if (num > 999 && num < 10000) {
                  valueTxt = "-" + num / 1000 + "k";
                } else if (num >= 10000) {
                  valueTxt = "-" + num / 10000 + "w";
                } else {
                  valueTxt = "-" + num;
                }
              }

              return valueTxt;
            },
          },
        },
        // x轴拖动
        // dataZoom: [
        //   {
        //     type: "slider",
        //     realtime: true, //拖动滚动条时是否动态的更新图表数据
        //     height: 10, //滚动条高度
        //     start: 0, //滚动条开始位置（共100等份）
        //     end: 90, //结束位置（共100等份）
        //   },
        // ],
        series: that.ySeries,
      };
      this.echarts.setOption(option);
    },
  },
};
</script>
<style lang="less">
.msg-chart {
  position: relative;
  width: 100%;
  .time {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    background: rgba(255, 255, 255, 1);
    padding: 0 26px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 2px #f2f2f2;
    z-index: 10;
    .back {
      background: rgba(76, 76, 76);
      color: white;
      font-size: 28px;
      padding: 5px 10px;
      border-radius: 10px;
    }
    .item {
      width: 165px;
      height: 46px;
      background: rgba(255, 255, 255, 1);
      text-align: center;
      line-height: 46px;
      font-size: 28px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: rgba(155, 155, 155, 1);
    }
    .item_ {
      background: rgba(252, 234, 234, 1) !important;
      color: #dd0842;
    }
    .line {
      width: 2px;
      height: 28px;
      background: #f2f2f2;
    }
  }
  .change-chart {
    // margin-top: 120px;
    position: fixed;
    top: 120px;
    display: flex;
    padding-left: 26px;
    box-sizing: border-box;
    .item {
      width: 165px;
      height: 46px;
      background: rgba(255, 255, 255, 1);
      text-align: center;
      line-height: 46px;
      font-size: 28px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: rgba(155, 155, 155, 1);
      margin-right: 15px;
    }
    .item_ {
      background: rgba(252, 234, 234, 1) !important;
      color: #dd0842;
    }
  }
  #charts {
    width: 100%;
    height: 800px;
    position: absolute;
    top: 200px;
    left: 0;
  }
}
</style>
